<template>
	<form class="px-[35px]" @submit.prevent="onEnter">
		<input type="submit" class="hidden" />
		<base-icon
			name="back2"
			class="text-[20px] absolute left-3 top-3 cursor-pointer"
			@click="onBack" />
		<base-icon
			name="close"
			class="text-[20px] absolute right-3 top-3 cursor-pointer"
			@click="onClose" />
		<div class="h-12 mt-[50px] mb-4 pt-[12px] app-font-bold text-center text-[20px]">
			{{ $t(info.title) }}
		</div>
		<base-tip class="mb-4" :text-t="info.tip" />
		<base-input
			:label-t="info.label"
			:placeholder="tInput(info.placeholder)"
			type="number"
			v-model="code"
			:name="FormFieldName.verifyCode"
			:autofocus="isPC()"
			:error-t="codeError ? 'reset.step2Title' : ''"
			@update:focus="codeError = false" />
		<base-button type="primary" :loading="loading" @click="onEnter">
			{{ $t('region.submit') }}
		</base-button>
	</form>
</template>

<script setup lang="ts">
import { computed, nextTick, ref } from 'vue'
import { FormFieldName } from '@/enums'
import { useAccountStore } from '@/store'
import { AccountShowType } from '@/types'
import { BaseButton, BaseIcon, BaseInput, BaseTip } from '@/components/base'
import { useRequest } from '@/hooks'
import { fmtEmail, fmtMobile, isCode, isPC, tInput } from '@/utils'
import { VerifyCodeType } from '@/api/account-type'
import { mobilePasswordResetVerify } from '@/api/account.ts'

const accountStore = useAccountStore()

const resetResult = computed(() => accountStore.resetResult)
const pageInfo = computed(() => ({
	email: {
		title: 'login.emailAuthentication',
		tip: ['reset.step2Subtitle', [fmtEmail(resetResult.value?.email)]] as string | any[],
		label: 'email.code',
		placeholder: 'email.code'
	},
	mobile: {
		title: 'login.mobileAuthentication',
		tip: [
			'reset.step2Subtitle',
			[fmtMobile(resetResult.value?.internationalAreaCode + ' ' + resetResult.value?.mobile)]
		] as string | any[],
		label: 'account.mobileCode',
		placeholder: 'account.mobileCode'
	}
}))
const code = ref('')
const codeError = ref(false)
const info = computed(() => {
	// 根据login接口返回(邮箱|手机|2fa) 判断要展示的标题等信息
	let _info = pageInfo.value.email
	if (resetResult.value) {
		const { verifyCodeType } = resetResult.value
		if (verifyCodeType === VerifyCodeType.mobile) {
			_info = pageInfo.value.mobile
		}
	}
	return _info
})

const onBack = () => accountStore.showAccount(AccountShowType.login)
const onClose = () => accountStore.showAccount(AccountShowType.none)

const { run, loading } = useRequest(mobilePasswordResetVerify, {
	showError: true,
	onSuccess: () => {
		accountStore.resetToken = code.value.trim()
		accountStore.showAccount(AccountShowType.resetPassword)
	}
})

const onSubmit = () => {
	if (loading.value) return
	if (resetResult.value) {
		run({
			...resetResult.value,
			code: code.value.trim()
		})
	} else {
		console.error('resetResult 缺少参数', resetResult.value)
	}
}

const onEnter = () => {
	if (loading.value) return
	codeError.value = !isCode(code.value)
	nextTick(() => {
		if (codeError.value) return
		onSubmit()
	})
}
</script>

<style scoped></style>
